// 商品id获取
function getProductId(){
console.log(location.href)
let url=location.href

let index=url.indexOf('?')
let subUrl=url.substring(index+1)
let id=subUrl.split("=")[1]
// console.log(id)
return id
}
getProductId()

// 商品详情数据
function loadProduct(){
    let id=getProductId()
    $.ajax({
        url:'http://www.xiongmaoyouxuan.com/api/detail',
        type:'get',
        data:{
            id
        },
        success:function(result){
            if(result.code===200){
                let detail=result.data.detail
                showDetail(detail)
                gouwu(detail)
            }
        }
    })
}

loadProduct()
// 商品数据渲染
function showDetail(detail){
    let detailStr=`
    <div class="cmd-info">
    <!--左边图片-->
    <div class="cmd-info-left">
        <div class="box1">
            <img src=" ${detail.image}"alt="">
            <div class="sun"></div>
        </div>
    <div class="box2">
    <img src="${detail.image}" 
        alt="">
</div>
    </div>
    <div class="cmd-right">


        <div class="cmd-title">
            <!--淘宝图标-->
            <img class="platform"
               <img data-v-3b1ea705="" src="" class="platform">
            <h1>
            ${detail.title}
            </h1>
        </div>
        <div class="cmd-price">
            <p>原价：<del>￥${detail.originPrice}</del></p>
            <p class="juanhoujia">劵后价：￥<b>${detail.price}</p>
            <span>${detail.couponValue}</span>
            <p class="yigoumai">171人已购买</p>

        </div>
        <div class="gouwuche">
        <div class="wrap-input">
        <!--<input class="text buy-num" id="buy-num" value="1" data-max="200">
        <a class="btn-reduce" href="#none" data-disabled="1">-</a>
        <a class="btn-add" href="#none" data-disabled="1">+</a>-->
        
    </div>
            <span class="youxiaoqi">优惠有效期:${detail.expireDate}</span>
            <button>领卷购买</button>
            <button class="gouwuches">加入购物车</button>
        </div>
    </div>
</div>
<!--商品详情（右边）-->
<div class="shop-info">
    <div class="conten">
        <span class="line"></span>
        <span class='txt'>商家信息</span>
        <span class="line"></span>

    </div>
    <img class="shop-image" src="${detail.shop.coverUrl}">
    <p class="shop-name">${detail.shop.title}</p>
    <div class="shop-name">
        <ul class="character">
            <li>描述</li>
            <li>服务</li>
            <li>物流</li>
        </ul>
        <ul class="score">
            <li>${detail.shop.serviceScore}</li>
            <li>4.9</li>
            <li>5.0</li>
        </ul>
    </div>
</div>
<!--商品详情（下面图片）-->
<div class="cmd-detail">
    <div class="imgs">
        <img data-v-3b1ea705=""
            src="${detail.image}"
            alt="">
        <img data-v-3b1ea705=""
            src="${detail.image}">
    </div>
</div>
    `
  $('.product-det').html(detailStr)
  new Amag()
}



// 首页跳转
function shouye(){
    location.href="../index.html"
}


// 购物车跳转
function gouwu(data){
    $(".gouwuches").click(() => {
        let id = data.couponId - 0;
        let list = JSON.parse(localStorage.getItem('cart')) || [];
        if (!list.length) {
            data.activeTagIndex = 1;
           list.push(data);
        } else {
            //判断数组里面有没有相同的同条数据
            let res = list.some(item => { return item.couponId == id })
            
            if (res) {
                //把数据在数组里面的下标找到，对应数量++
                let index = list.findIndex(item => { return item.couponId == id })
                
                list[index].activeTagIndex += 1
;            } else {
                // data.activeTagIndex = $('.buy-num')[0].value-0;
                list.push(data);
            }
        }
        localStorage.setItem('cart', JSON.stringify(list))
        location.href="gouwuche.html"
    });
}

class Amag {
    constructor() {
        this.father = $('.box1')[0];
        this.sun = $('.sun')[0];
        this.bother = $('.box2')[0];
        this.img = $('.box2>img')[0];
        this.over()
        this.move()
        this.out()
        this.test()
    }
    over() {
        // 移入
        this.father.addEventListener('mouseenter', () => {
            this.sun.style.display = 'block';
            this.bother.style.display = 'block';
        })
    }
    move() {
        this.father.addEventListener('mousemove', e => {
            e = e || window.event
            let _left = e.pageX - $('.cmd-info-left')[0].offsetLeft - parseInt(this.sun.offsetWidth / 2)
            let _top = e.clientY - $('.cmd-info-left')[0].offsetTop - parseInt(this.sun.offsetHeight / 2)
            
            let _width = this.father.offsetWidth - this.sun.offsetWidth
            let _height = this.father.offsetHeight - this.sun.offsetHeight

            // 限制元素位置
            if (_left < 0) {
                _left = 0
            } else if (_left >= _width) {
                _left = _width
            }
            if (_top < 0) {
                _top = 0
            } else if (_top >= _height) {
                _top = _height
            }

            let _box2Width = this.img.offsetWidth - this.bother.offsetWidth
            let _box2Height = this.img.offsetHeight - this.bother.offsetHeight
     
            let _sumWidth = _box2Width / _width
            let _sumHeight = _box2Height / _height

            this.sun.style.left = _left + 'px';
            this.sun.style.top = _top + 'px';

            this.img.style.left = (-_left * _sumWidth) + 'px'
            this.img.style.top = (-_top * _sumHeight) + 'px'
        })
    }
    out() {
        this.father.addEventListener('mouseleave', e => {
            this.sun.style.display = 'none'
            this.bother.style.display = 'none'
        })
    }
    test() {

    }
}
